<template>
    <div class="main">
        <div class="content1">
            <div class="left">
                <div>
                    <el-select v-model="value" placeholder="请选择代理商">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div>
                    <el-select v-model="value" placeholder="请选择集团">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div>
                    <el-input v-model="input" placeholder="请输入品牌名称"></el-input>
                </div>
                <el-button type="primary">查询</el-button>
            </div>
            <div class="right"><v-change :msg="add"></v-change><div><el-button type="primary">功能授权</el-button></div></div>
        </div>
        <div class="content2">
            <div class="left">
                <div class="top"><span>品牌区域</span><span>品牌</span></div>
                <div class="tree">
                    <div class="tree1"><qu-yu></qu-yu></div>
                    <div class="tree2">
                        <span v-for="(item,index) in form" @click="dailishan(index)" :class="{bg:show[index].show}">{{item.name}}</span>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="tab">
                    <el-table
                        ref="multipleTable"
                        :data="tableData3"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                        <el-table-column
                            type="selection"
                            width="55">
                        </el-table-column>
                        <el-table-column
                            label="角色名称"
                            width="120">
                            <template slot-scope="scope">{{ scope.row.date }}</template>
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="状态"
                            width="80">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="创建人"
                            width="80">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="创建时间"
                            width="80">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="异动人"
                            width="80">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="异动时间"
                            width="80">
                        </el-table-column>
                        <el-table-column
                            prop="address"
                            label="操作"
                            show-overflow-tooltip>
                            <template slot-scope="scope">
                                <div class="caozuo">
                                    <v-change :msg="check"></v-change>
                                    <v-change :msg="xiuGai"></v-change>
                                    <div><el-button size="mini" type="info">删除</el-button></div>
                                    <v-shuju></v-shuju>
                                    <v-gongneng></v-gongneng>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="note">没有更多数据了</div>
            </div>
        </div>
    </div>
</template>

<script>
    import quYu from './quyu'
    import vChange from './change_zhanghaojuese'
    import vGongneng from './gongneng'
    import vShuju from './shuju'
    export default {
        name: "index",
        components:{
            'quYu': quYu,
            'vChange':vChange,
            'vGongneng':vGongneng,
            'vShuju':vShuju
        },
        data() {
            return{
                add:{'boo':'add','title':'创建代理商'},
                xiuGai: {'boo':'xiuGai','title':'修改代理商'},
                check: {'boo':'check','title':'查看代理商'},
                input:'',
                options:'',
                value:'',
                tableData3: [{
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                multipleSelection: [],
                form: [{'name':'代理商一','key':1},{'name':'代理商二','key':1},{'name':'代理商三','key':1}],
                show:[{show:true},{show:false},{show:false},{show:false},
                    {show:false},{show:false},{show:false},{show:false}],
            }
        },
        methods:{
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            dailishan(index) {
                this.show=[{show:false},{show:false},{show:false},{show:false},
                    {show:false},{show:false},{show:false},{show:false}]
                this.show[index].show=true
            }
        }
    }
</script>

<style lang="less" scoped>
    .bg{background: #fffece}
    .main{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        .content1{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            margin-bottom: 10px;
            .left{
                display: flex;
                flex-direction: row;
                border-right: 1px solid #dedede;
                margin-right: 10px;
                padding-right: 10px;
                div{margin-right: 10px}
            }
            .right{
                display: flex;
                flex-direction: row;
                div{margin-right: 10px}
            }
        }
        .content2 {
            flex: 1;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            .left{
                width: 400px;
                height: 100%;
                display: flex;
                border-right: 1px solid #dedede;
                flex-direction: column;
                .top{
                    width: 400px;
                    height: 36px;
                    background: #dedede;

                    line-height: 36px;
                    font-size: 14px;
                    span{
                        width: 200px;
                        height: 36px;
                        display: block;
                        float: left;
                        text-align: center;
                    }
                }
                .tree{
                    width: 400px;
                    display: flex;
                    flex-direction: row;
                    flex: 1;
                    background: #ffffff;
                    div{
                        flex: 1;
                    }
                    .tree2{
                        border-left: 1px solid #dedede;
                        span{
                            width: 200px;
                            height: 36px;
                            line-height: 36px;
                            text-align: center;
                            display: block;
                            color:#606266;
                            border-bottom: 1px solid #dedede;
                        }
                    }
                }
            }
            .right{
                flex: 1;
                display: flex;
                flex-direction: column;
                background: #fff;
                    .caozuo{
                        display: flex;
                        justify-content: flex-start;
                    }
                .note{
                    font-size: 24px;
                    text-align: center;
                    margin-top: 40px;
                    color: #dedede;
                }
            }
        }
    }
</style>
